import '../../assets/scss/tooltip.scss'
const enum Ttp{
    T="t",
    B="b",
    L="l",
    R="r",
    LT="lt",
    RT="rt",
    LB="lb",
    RB="rb"
}
function getXY(rect:{left:number,top:number,width:number,height:number},dir:Ttp){
    const {left,top,width,height} = rect;
    switch(dir){
        case Ttp.B:return [left+width/2,top+height]
        case Ttp.L:return [left,top+height/2]
        case Ttp.R:return [left+width,top+height/2]
        case Ttp.LT:return [left,top]
        case Ttp.RT:return [left+width,top]
        case Ttp.LB:return [left,top+height]
        case Ttp.RB:return [left+width,top+height]
        // case Ttp.T
        default:return [left+width/2,top]
    }
}
let cacheE:HTMLElement;
export default {
    init(){
        let tooltip = document.querySelector("#ph-tooltip") as HTMLElement
        if(tooltip===null){
            tooltip = document.createElement("div")
            tooltip.id="ph-tooltip"
            tooltip.className = "ph-tooltip"
            tooltip.innerHTML=`<div class="ph-tooltip-text"></div><div class="ph-tooltip-arrow"></div>`
            document.body.appendChild(tooltip)
        }
        return {
            beforeMount(el:HTMLElement,binding:any):void{
                el.addEventListener("mouseenter",(e:Event)=>{
                    let arg = binding.arg||Ttp.T
                    const 
                        t = e.target as HTMLElement,
                        {clientHeight,clientWidth} = document.documentElement,
                        rect = el.getBoundingClientRect();
                        if(el!=cacheE){
                            cacheE = el
                            const text = tooltip?.querySelector(".ph-tooltip-text") as HTMLElement;
                            text.textContent = binding.value as string
                        }
                    tooltip.classList.add("ph-tooltip-"+arg)
                    let 
                        pos = getXY(rect,arg),
                        limit2 = (arg.match(/[tb]/)||[])[0]||"",
                        limit1 = (arg.match(/[lr]/)||[])[0]||"";
                    if(arg!=Ttp.L&&arg!=Ttp.R){
                        if(pos[1]-tooltip.offsetHeight<0)
                            limit2="b"
                        if(pos[1]+tooltip.offsetHeight>clientHeight)
                            limit2="t"
                    }
                    if(pos[0]-tooltip.offsetWidth<0)
                        limit1=limit2?"l":"r"
                    if(pos[0]+tooltip.offsetWidth>clientWidth)
                        limit1=limit2?"r":"l"
                    arg = limit1+limit2
                    pos = getXY(rect,arg)
                    tooltip.className = "ph-tooltip ph-tooltip-"+arg
                    tooltip.style.cssText=`left:${pos[0]}px;top:${pos[1]}px;opacity:1;`
                })
                
                el.addEventListener("mouseleave",()=>{
                    tooltip.className="ph-tooltip"
                })
            },
            beforeUpdate(el:HTMLElement,binding:any){
                const text = tooltip?.querySelector(".ph-tooltip-text") as HTMLElement;
                text.textContent = binding.value as string
            }
        }
    }
}